<template>
	<div class="wrapper">
		<Chart id="position" :option="option" ></Chart>
	</div>
</template>

<script>

import Chart from "@/components/chart/chart.vue";
import { getChartData } from "@/api/echarts";

export default {
	name: 'position',
	components: { Chart },
	props: [],
	data() {
		return {
			option: {},
		};
	},
	mounted() {
		getChartData(
			{ "custom_chart_id": "20" }
		).then(res => {
			this.chartData = res.data.data;
			this.setOption();
		});
		// this.setOption();
	},
	methods: {
		setOption() {
			this.option = {

				geo: {
					name: '地图',
					type: 'map', //地图种类、
					map: 'china', //地图类型。
					zlevel: 1,
					show: true,
					layoutCenter: ['46%', '66%'],
					// roam: true,
					layoutSize: "100%",
					zoom: 1.2,
					label: {
						normal: {
							show: false,
							textStyle: {
								fontSize: 14,
								// 文字顔色
								color: '#fff'
							}
						}
					},
					itemStyle: { //地图区域的多边形 图形样式。
						areaColor: 'rgb(84 112 198)',
						emphasis: { //高亮状态下的样试
							label: {
								show: true,
							},
							// areaColor: '#052647',
						},
						normal: {
							areaColor: 'rgb(84 112 198)',
							borderWidth: 1, //设置外层边框
							borderColor: 'rgb(115 192 222)',
							show: false,
						},
						shadowBlur :{
							shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
						}
					},
				},
				series: [
					{
						// effectScatter画散点【起点】
						type: 'effectScatter',
						coordinateSystem: 'geo',
						zlevel: 2,
						symbolSize: 6,
						rippleEffect: {
							period: 3,
							brushType: 'stroke',
							scale: 3
						},
						itemStyle: {
							color: '#e3f71c',
							opacity: 0.7
						},
						data: this.chartData 
					},
					// {
					// 	// 画中心散点【终点】,这里是为了区分起点终点不同样式，所以分开写，如果二者样式一样那就直接合在一起写就好了
					// 	type: 'effectScatter',
					// 	coordinateSystem: 'geo',
					// 	zlevel: 2,
					// 	symbolSize: 10,
					// 	rippleEffect: {
					// 		period: 4,
					// 		brushType: 'stroke',
					// 		scale: 4
					// 	},
					// 	itemStyle: {
					// 		color: '#FF5722',
					// 		opacity: 1
					// 	},
					// 	data: coord.slice(0, 2)
					// },
					//这里设了2条不同效果的飞线是为了讲他们叠加起来，满足飞机后面白色的喷气动画效果
					// {
					// 	type: 'lines',
					// 	"zlevel": 5,
					// 	coordinateSystem: 'geo',
					// 	"lineStyle": {
					// 		// "normal": {
					// 		// 	"color": "#0c6ade",
					// 		// 	"width": 1,
					// 		// 	"curveness": 0.2
					// 		// }
					// 		"color": "#0c6ade",
					// 		"width": 1,
					// 		"curveness": 0.2
					// 	},
					// 	data: lines_coord
					// },
				],
			};
		},
		//修改echart配制
		setEchartOption() {
			//红色标注点的坐标
			let markList = [
				{ name: '五常', value: [123.523565, 52.920114] },
				{ name: '中治', value: [126.319954, 46.400728] },
				{ name: '中顺', value: [133.310927, 47.271857] },
				{ name: '常也', value: [129.631468, 45.65747] },
				{ name: '可谭', value: [130.551333, 47.321922] },
				{ name: '顺允', value: [125.436884, 48.460261] },
			];
			this.options.series[1].data = markList;
			if (markList.length > 0) {
				this.options.series[1].renderItem = function (params, api) {
					return {
						type: 'image',
						name: 'aaa',
						style: {
							image: require("@/assets/img/logo.png"), //标注点图标
							width: 14,
							height: 18,
							x: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[0],
							y: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[1]
						}
					};
				};
			}
		}
	},
};
</script>
<style lang="scss" scoped>
.wrapper {}
</style>